<template>
  <div>
    <puplic-modal
      width="500px"
      :publicVisible="publicVisible"
      modalStyle="addEditSupportModal"
      @cancel="cancel"
      @handleOk="handleOk"
      :title="title"
    >
      <div slot="content" class="content">
        <div class="search-group" style="width: 100%">
          <div class="input-wrap" style="width: 100%">
            <div class="label xing">设备名称:</div>
            <div class="input-item" style="width: 100%">
              <a-input :maxLength="30" clearable v-model="deviceConfigName" placeholder="请输入设备名称" />
            </div>
          </div>
        </div>

        <div class="search-group" style="width: 100%; margin: 20px 0">
          <div class="input-wrap" style="width: 100%">
            <div class="label xing" style="max-width: 60px">排序值:</div>
            <div class="input-item" style="width: 100%">
              <a-input
                :maxLength="3"
                clearable
                v-model="deviceConfigOrder"
                placeholder="请输入排序值,值越小显示越靠前"
              />
            </div>
          </div>
        </div>

        <div class="search-group" style="width: 100%">
          <div class="input-wrap" style="width: 100%">
            <div class="label" style="max-width: 60px">描述:</div>
            <div class="input-item" style="width: 100%">
              <a-textarea
                :maxLength="30"
                style="height: 100px; overflow: auto; resize: none"
                v-model="deviceDeviceMemo"
                placeholder="请输入描述"
              />
            </div>
          </div>
        </div>
      </div>
    </puplic-modal>
  </div>
</template>
<script>
import puplicModal from '@/components/publicModal'
import { hotelDeviceConfigAdd, hotelDeviceConfigEdit, } from '@/api/industry'
export default {
  components: { puplicModal },
  name: 'addEditSupportModal',
  data () {
    return {
      title: '',
      publicVisible: false,
      deviceConfigName: '',
      deviceConfigOrder: '',
      deviceDeviceMemo: '',
      records: {},
    }
  },
  methods: {
    show (records) {
      this.records = records
      this.publicVisible = true

      if (records && records.id) {
        this.title = '编辑'
        this.deviceConfigName = records.deviceConfigName
        this.deviceConfigOrder = records.deviceConfigOrder
        this.deviceDeviceMemo = records.deviceDeviceMemo
      } else {
        this.title = '新增'
      }
    },

    async handleOk () {
      if (this.deviceConfigName == '') {
        this.$message.error('请输入设备名称')
        return
      }
      if (this.deviceConfigOrder == '') {
        this.$message.error('请输入排序值')
        return
      }
      let reg = /^(0|\+?[1-9][0-9]{0,2})$/
      if (reg.test(this.deviceConfigOrder) == false) {
        this.$message.error('只支持输入小于五位的正整数')
        return
      }

      let data = {
        deviceConfigName: this.deviceConfigName,
        deviceConfigOrder: this.deviceConfigOrder,
        deviceDeviceMemo: this.deviceDeviceMemo
      }

      if (this.title == '新增') {
        let res = await hotelDeviceConfigAdd(data)
        this.$message.success(res.message)
        this.cancel()
        this.$emit('refresh')
      } else {
        data.id = this.records.id
        let res = await hotelDeviceConfigEdit(data)
        this.$message.success(res.message)
        this.cancel()
        this.$emit('refresh')
      }
    },
    cancel () {
      this.publicVisible = false
      this.deviceConfigName = ''
      this.deviceConfigOrder = ''
      this.deviceDeviceMemo = ''
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/common.less';

/deep/ .content {
  padding: 20px;
}
.search-group {
  padding: 0;
}
</style>
